<template>
	<view class="page">
		<u-navbar :autoBack="true" :placeholder="true" :border="false">
			<template #center>
				<u-text suffixIcon="arrow-down-fill" iconStyle="margin-left: 10rpx" align="center" text="5以内的加减法" size="32rpx"
					color="#333" @click="showPopup = !showPopup"></u-text>
			</template>
		</u-navbar>
		<view class="main">
			<view class="flex align-center padding-tb-sm">
				<view class="flex-1">
					<u-text text="本班错误人数：8人" color="#666" size="28rpx"></u-text>
				</view>
				<view>
					<u-text text="本班错误率：30%" color="#666" size="28rpx"></u-text>
				</view>
			</view>
			<view class="student-list">
				<view class="student-item" v-for="i in 8">
					<u-avatar :src="`https://picsum.photos/200/300?random=${i}`" size="120rpx"></u-avatar>
					<u-text margin="10rpx 0 0 0" align="center" text="张三" size="28rpx" color="#333"></u-text>
				</view>
			</view>
			<Card class="margin-top" :title="`错题详情${i}-张三`" :more="false" v-for="i in 2" :key="i">
				<image src="/static/image/img-math.png" mode="widthFix" style="width: 100%;height: 100%;">
				</image>
			</Card>
			<PopupBox :show="showPopup" :top="0">
				<view class="popup-item" v-for="i in 4" :key="i" @click="handleKnowledgeClick(i)">
					<u-text align="center" text="5以内的加减法" size="32rpx" color="#333"></u-text>
				</view>
			</PopupBox>
		</view>
		<view class="footer gap">
			<u-button :customStyle="{ color: themePrimary }" size="large" shape="circle" :color="themeTertiary" text="练习题生成"
				@click="toExerciseClick"></u-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useTheme } from '@/composables/useTheme';
import Card from '@/components/Card/index.vue';
import PopupBox from '@/components/PopupBox/index.vue';
const { themePrimary, themeSecondary, themeTertiary } = useTheme();
const id = ref(0);
const showPopup = ref(false);
onLoad((options) => {
	id.value = options.id;
});

const toExerciseClick = () => {
	uni.navigateTo({
		url: `/pages/teacher/createExercise/create?id=${id.value}`
	});
}

const handleKnowledgeClick = (item) => {
	console.log('item', item)
	showPopup.value = false
}
</script>
<style scoped lang="scss">
.student-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40rpx;
	padding: 30rpx;
}

.student-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.popup-item {
	padding: 20rpx 40rpx;
}

.footer {
	box-shadow: 0rpx -4rpx 36rpx 0rpx rgba(234, 245, 255, 1);
}
</style>
